<template>
    <div class="diff-container" :class="boxClass" ref="mergeview"></div>
    <!-- <div ref="test" style="height:600px"></div> -->
</template>
<script lang="ts" setup>
import { computed, onMounted, reactive, ref } from 'vue';
import {MergeView} from "@codemirror/merge"
import {EditorView, basicSetup} from "codemirror"
import {EditorState,Text} from "@codemirror/state"
import {defaultKeymap, standardKeymap, insertTab,historyKeymap, history } from "@codemirror/commands"
import {searchKeymap,search} from "@codemirror/search"
import {keymap,lineNumbers,highlightActiveLine,drawSelection} from "@codemirror/view"
import { autocompletion } from "@codemirror/autocomplete";
import {
  oneDarkTheme,
  oneDarkHighlightStyle,
} from "@codemirror/theme-one-dark";
import { html } from "@codemirror/lang-html";
import type {DiffConfig,MergeConfig,DirectMergeConfig} from "@codemirror/merge"
import { Content } from 'ant-design-vue/es/layout/layout';

const emit = defineEmits(['update:oldValue','update:newValue']);


const props = defineProps({
    oldValue: {
        type: String,
        default: ""
    },
    newValue: {
        type: String,
        default: ""
    },
    isReadOnly: {
        type: Boolean,
        default: false
    },
    isDark:{
        type:Boolean,
        default:false
    }
})
const mergeview = ref<HTMLDivElement>()
const test = ref<HTMLDivElement>()
const boxClass = computed(()=>{ return props.isDark ? 'diff-dark' : 'diff-light' }) 

const initView = () => {
    let view = new MergeView({
    a: {
        doc:(props.oldValue),
        highlightChanges: true,
        extensions: [
            basicSetup,
            lineNumbers({
                formatNumber: (lineNo: number, state: EditorState) => (lineNo+'111').toString(),
            }),
            history(),
            oneDarkTheme,
            keymap.of([
                ...standardKeymap,
                ...historyKeymap,
                {
                    key: "Tab",
                    run: insertTab,
                },
            ]),
            html(),
            EditorView.editable.of(false),
            autocompletion({ activateOnTyping: true }),
            EditorView.updateListener.of((v) => {
                if (v.docChanged) {
                    // props.oldValue = v.state.doc;
                    console.debug('oldValue', v.state.doc);
                    emit('update:oldValue', v.state.doc);
                }
            }),
        ],
    },
    b: {
        doc: props.newValue,
        extensions: [
            basicSetup,
            oneDarkTheme,
            lineNumbers({
                formatNumber: (lineNo: number, state: EditorState) => (lineNo+'222').toString(),
            }),
            keymap.of([
                ...standardKeymap,
                {
                    key: "Tab",
                    run: insertTab,
                },
            ]),
            html(),
            autocompletion({ activateOnTyping: true }),
            EditorView.updateListener.of((v) => {
                if (v.docChanged) {
                    emit('update:newValue', v.state.doc);
                }
            }),
        ],
    },
    parent: mergeview.value
    })
 }

onMounted(() => {
    initView();
})

const creatEditorView = (doc) => {
    const theme = EditorView.baseTheme({
        "&.cm-editor": {
          fontSize: "16px",
          height: "100%",
          textAlign: "start",
        },
        ".cm-scroller": {
          fontFamily:
            "Consolas, Menlo, Monaco, source-code-pro, Courier New, monospace",
        },
      });
    return new EditorView({
        doc: doc,
        extensions: [
            highlightActiveLine(),
            oneDarkTheme,
            theme,
            EditorView.updateListener.of((v) => {
                if (v.docChanged) {
                    emit('update:oldValue', v.state.doc.toString());
                }
            }),
            lineNumbers(),
            keymap.of([
                ...standardKeymap,
                {
                key: "Tab",
                run: insertTab,
                },
            ]),
            html(),
            autocompletion({ activateOnTyping: true }),
        ],
        parent: test.value,
    })
 }



</script>
<style lang="scss" scoped>
.diff-container{
    height: 100%;
    overflow: auto;
    @include scrollbar($width: 10px, $height: 10px);
    color: #000;
    :deep(.cm-mergeViewEditors){
        &.cm-mergeViewEditor:first-child{
            background-color: #f00;
        }
    }
}
.diff-dark{
    color: rgba($color: #fff, $alpha: 0.8);
    background-color: rgba($color: #000000, $alpha: 0.8);
}
.diff-light{
    color: rgba($color: #000, $alpha: 0.8);
    background-color: #fff;
}
</style>